<html>
  <head>
    <script>
      Ext.onReady(function(){

      var proxy=new Ext.data.HttpProxy(    {url:'http://localhost:7001/occurrence-crawler-console/Job/running'});
          var reader=new Ext.data.JsonReader(
          {
          },[
            {name: "jobId", mapping : "jobId"},
            {name: "status", mapping : "status.status"},
            {name: 'lowerRange', mapping : "status.lowerRange"},
            {name: 'upperRange', mapping : "status.upperRange"},
            {name: 'recordCount', mapping : "status.recordCount"},
          ]
        )
        var store=new Ext.data.Store(    {
          proxy:proxy,
          reader:reader
         });
      store.load();
    
    
      // create the grid
      var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
          {header: "Status", width: 300, dataIndex: 'status', sortable: true},
          {header: "Lower",dataIndex: 'lowerRange', sortable: true},
          {header: "Upper", dataIndex: 'upperRange', sortable: true},
          {header: "Count", dataIndex: 'recordCount', sortable: true},
        ],
        renderTo:'grid',
        stripeRows: true,
        height: 350,
        width: 1000,
        title: 'Running',
        listeners: {
          rowclick:function(grid, rowIndex, e) {
            var rec = grid.store.getAt(rowIndex);
            window.location='http://localhost:7001/occurrence-crawler-console/Job/terminate?jobId='+rec.get('jobId');
          }
        }
      });
    
    });     
      
      
    </script>
  </head>
  <body>
    <p>
      <a href="resource/console">Resources</a> | <a href="resource/total">Summary</a> 
    </p>
    <p>
      <h2>At a glance</h2>
      <a href="http://localhost:7001/occurrence-crawler-console/resource/resource/console?method=running">What's running?</a> | 
      <a href="http://localhost:7001/occurrence-crawler-console/resource/resource/console?method=queued">What's queued?</a> |
      <a href="http://localhost:7001/occurrence-crawler-console/resource/resource/console?method=offline">What's offline?</a> | 
      <a href="http://localhost:7001/occurrence-crawler-console/resource/resource/console?method=missing">What's missing records?</a> | 
      <a href="http://localhost:7001/occurrence-crawler-console/resource/resource/console?method=missing">What's over harvested?</a>
    </p>
    <div id="grid"></div>
  </body>
</html>